JavaScript 操作 DOM

DOM 对象是什么

B: browser 浏览器 O: Object 对象 M: Model 模型

浏览器网页就是一个 DOM 树形结构

要操作一个 DOM 节点，就必须先获得这个 DOM 节点

获取节点

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>


<script>
    //对于css选择器
    //注意！！！使用TagName有点特殊，因为获取的是集合，所以需要使用[]来取得元素
    let h1 = document.getElementsByTagName('h1');
    //使用集合
    h1[0].style.background = '#e29494';


    let p1 = document.getElementById('p1');
    let p2 = document.getElementsByClassName('p2');

    let father = document.getElementById('father');
    
    
    //获取所有子节点(获取的是集合，所以可以用来遍历)
    let children = father.children;

    father.firstChild;
    father.lastChild;
</script>

更新节点

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>


<script>
    let p1 = document.getElementById('p1');
    //修改内容
    p1.innerText = 'hello DOM'
    //插入DOM(注意会覆盖原本的内容)
    p1.innerHTML = '<h2> insertion </h2>'
    // 修改css样式
    p1.style.color = 'yellow';
    // 同理改字大小
    p1.style.fontSize = '100px';
</script>

删除节点

//方式一
//删除节点的步骤，先获取父节点才能把其删除
let self = document.getElementById('p1');
//获取父节点
let father = self.parentElement;
//再通过父节点将其删除
father.removeChild(self);

//方式二
//通过下标来删
let father = document.getElementById('father');
father.removeChild(father.children[0]);

插入节点

方式一(覆盖) 使用前面提到的 innerText 或者 innerHTML，但是这样写有个弊端就是会 覆盖 原本的内容，所以这适合原本就是空的 DOM 节点

方式二(追加)

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>


<script>
let js = document.getElementById('js'),
    list = document.getElementById('list');

//例如把js放到list里面去
    list.append(js);
</script>



--->最后生成的效果
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
    <p id="js">JavaScript</p>
</div>

上面是把一个已经存在的节点追加到节点的后面，如果需要创建一个节点则使用 createElement

// 通过js创建一个节点(p标签)
let newP = document.createElement('p');
// 给节点设置一个id
newP.id = 'newP';
newP.innerText = 'hello Document!';
list.append(newP);

指定插入节点

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    let js = document.getElementById('js');
    let ee = document.getElementById('ee');
    let list = document.getElementById('list');
    //在ee前面插入js
    list.insertBefore(js,ee);
</script>

替换节点

obj.replaceChild(newNode,oldNode);

注入属性

<script src="assets/js/temp.js"></script>
<link href="" type="text/html">

这类需要插入值的标签，使用的是 setAttribute key value 的形式插入

let s = document.createElement('script')
s.setAttribute('type','application/javascript')

下载文件

const content = JSON.stringify(data);
const eleLink = document.createElement("a");
// 给这个文件设置一个不同的文件名后缀
eleLink.download = "mapData.mapdata";
eleLink.style.display = "none";
// 字符内容转变成blob地址
const blob = new Blob([content]);
eleLink.href = URL.createObjectURL(blob);
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);